<template>
  <view class="my-userinfo-container">
    <!-- 头像和昵称区域 -->
    <view class="top-box">
		
		<view class="supplement"  @click="goTouUpdateStudentInfo()">补充个人资料</view>
      <image :src="userinfo.headerUrl" class="avatar"></image>
      <view class="nickname">{{userinfo.nickName}}</view>
	  
    </view>
	
	<!-- 热点 -->
	<view class="panel-box">
		<view class="text">
			我的动态
		</view>
		<view class="hotspot" @click="gotoHotspot()">
			<view class="hotspot-num">
				已发布动态
			</view>
			<view class="hotspot-icon">
				<uni-icons type="right" size="15"></uni-icons>
			</view>
			
		</view>
	</view>
	<!-- 发布的商品 -->
	<view class="panel-box">
		<view class="text">
			我的商品
		</view>
		<view class="panel">
		  <view class="panel-body">
		    <view class="panel-item" @click="gotoGoodsList(1)">
		      <!-- <text>8</text> -->
		      <text>在售</text>
		    </view>
		    <view class="panel-item" @click="gotoGoodsList(2)">
		     <!-- <text>14</text> -->
		      <text>已售出</text>
		    </view>
		    <view class="panel-item" @click="gotoGoodsList(10)">
		      <!-- <text>18</text> -->
		      <text>关注的商品</text>
		    </view>
		    
		  </view>
		</view>
	</view>
	
	<view class="panel-box">
		<view class="text">
			我的工具
		</view>
		<view class="tool">
			联系我们
		</view>
	</view>

   
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'

  export default {
    data() {
      return {

      };
    },
    computed: {
      ...mapState('m_user', ['userinfo']),
	  ...mapState('m_user', ['userId']),
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
      async logout() {
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？'
        }).catch(err => err)

        if (succ && succ.confirm) {
          this.updateAddress({})
          this.updateUserInfo({})
          this.updateToken('')
        }
      },
	  gotoHotspot(){
		  uni.navigateTo({
		    url: '/subpkg/one-hotspot/one-hotspot?userId=' + this.userId
		  })
	  },
	  goTouUpdateStudentInfo(){
	  		  uni.navigateTo({
	  		    url: '/subpkg/personal_data/personal_data'
	  		  })
	  },
	  //根据1,在售，2：已售
	  gotoGoodsList(status){
		  if(status==10){
			  uni.navigateTo({
			    url: '/subpkg/goods_list/goods_list?flag=10'
			  })
		  }else{
			  uni.navigateTo({
			    url: '/subpkg/goods_list/goods_list?flag=2&&status='+status
			  })
		  }
		 
	  }
	  
    }
  }
</script>

<style lang="scss">
  .my-userinfo-container {
    height: 100%;
    background-color: #F4F4F4;

    .top-box {
      height: 400rpx;
      background-color: #C00000;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
		.supplement{
		  font-size: 16px;
		  color: #FFF;
		  font-weight: bold;
		  margin-top: 10px;
		  margin-right3: 10px;
	  }

      .avatar {
        width: 90px;
        height: 90px;
        border-radius: 45px;
        border: 2px solid #FFF;
        box-shadow: 0 1px 5px black;
      }

      .nickname {
        font-size: 16px;
        color: #FFF;
        font-weight: bold;
        margin-top: 10px;
      }
	  
	  
    }
  }
 
  .panel-box{
	  margin: 10px;
	  font-size: 16px;
	  padding-left: 5px;
	  .text{
	  	  font-size: 16px;
	  	  padding-left: 5px;
	  }
	  .hotspot{
		  margin-top: 10px;
		  background-color: white;
		   border-radius: 5px;
		   padding: 15px;
		   display: flex;
		   justify-content: space-between;
	  }
	  .panel {
		  margin-top: 10px;
	       background-color: white;
	       border-radius: 5px;
	       margin-bottom: 8px;
	  
	       .panel-title {
	         line-height: 45px;
	         padding-left: 10px;
	         font-size: 15px;
	         border-bottom: 1px solid #F4F4F4;
	       }
	  
	       .panel-body {
	         display: flex;
	         justify-content: space-around;
	  
	         .panel-item {
	           display: flex;
	           flex-direction: column;
	           align-items: center;
	           justify-content: space-around;
	           padding: 10px 0;
	           font-size: 13px;
	  
	           .icon {
	             width: 35px;
	             height: 35px;
	           }
	         }
	       }
	     }
		.tool{
			margin-top: 10px;
			background-color: white;
			border-radius: 5px;
			padding: 15px;
		}
  }
 
  .panel-list {
    padding: 0 10px;
    position: relative;
    top: -10px;

 
  }

  .panel-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    padding: 0 10px;
    line-height: 45px;
  }
</style>
